How do you enable server-side rendering on an existing Angular 21 project?

Question

ICSM · Answer

To enable Server-Side Rendering (SSR) on an existing Angular 21 project, you use
Angular Universal.
and 
What is SSR in Angular (Quick Context)
SSR renders Angular pages on the server (Node.js) instead of the browser
Benefits:
Faster first contentful paintBetter SEOImproved performance on slow devicesAngular SSR is implemented using Angular Universal.
Step 1: Add Angular Universal (SSR) to Existing Project
Run this command from your project root:
ng add @angular/ssr
This works for Angular 21 as well.
What this command does automatically
Adds server-side dependenciesCreates:
server.tsmain.server.tsapp.config.server.ts
Updates:
angular.jsonpackage.json
Configures Express serverNo manual wiring needed.
Step 2: Verify Generated Files
After installation, you should see:
src/
 ├── main.server.ts
 ├── app.config.server.ts
 └── server.ts
server.ts
Entry point for Node.js serverUses ExpressHandles SSR requests
Step 3: Build and Run SSR App
Build SSR bundles
npm run build:ssr
Start SSR server
npm run serve:ssr
App will run on:
http://localhost:4000
Step 4: Confirm SSR is Working
Open View Page Source (not DevTools Elements).
If SSR is enabled, you’ll see:
Fully rendered HTMLActual content (not just andlt;app-rootandgt;andlt;/app-rootandgt;)
Step 5: Handle Browser-Only APIs (IMPORTANT)
In SSR, code runs on Node.js, so these will crash:
windowdocumentlocalStoragenavigator
Correct way (Angular 21 compatible)
import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, Inject } from '@angular/core';
constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    localStorage.setItem('key', 'value');
  }
}
Step 6: SEO Optimization (Optional but Recommended)
Use Angular’s Meta and Title services:
import { Meta, Title } from '@angular/platform-browser';
constructor(private meta: Meta, private title: Title) {}
ngOnInit() {
  this.title.setTitle('Angular 21 SSR Page');
  this.meta.updateTag({ name: 'description', content: 'SEO friendly SSR page' });
}
These tags will be rendered on the server.
Step 7: Lazy Loading Works Automatically
SSR supports lazy-loaded modules out of the box.
No extra config required.
Step 8: Deployment (Production)
Typical production flow:
npm run build:ssr
node dist/your-project/server/server.mjs
Common hosting options
Azure App ServiceAWS EC2 / Elastic BeanstalkDocker + NginxVercel (with Node adapter)
One-Line Interview Summary
To enable SSR in an existing Angular 21 project, run ng add @angular/ssr, build using
npm run build:ssr, and serve the app via the generated Node.js Express server.
and

forum

How do you enable server-side rendering on an existing Angular 21 project?

Anubhav Kumar

Can you answer this question?

1 Answers

What is SSR in Angular (Quick Context)

Step 1: Add Angular Universal (SSR) to Existing Project

What this command does automatically

Step 2: Verify Generated Files

`server.ts`

Step 3: Build & Run SSR App

Build SSR bundles

Start SSR server

Step 4: Confirm SSR is Working

Step 5: Handle Browser-Only APIs (IMPORTANT)

Correct way (Angular 21 compatible)

Step 6: SEO Optimization (Optional but Recommended)

Step 7: Lazy Loading Works Automatically

Step 8: Deployment (Production)

Common hosting options

One-Line Interview Summary

Liked By